<template>
<!-- 纹理 -->
    <canvas id="canvas"></canvas>
</template>



<script setup lang="ts">
  import {onMounted} from "vue";
  import RenderContext from "@/views/cg/lib/RenderContext.ts";
  import {Model, shape} from "@/views/cg/lib";
  import { Mat4 } from '../lib/matrix'
  import gui from "@/views/cg/lib/gui";
  import Robot from './Robot.ts'
  onMounted(()=>{
    let gl = RenderContext.getGL()
    const model = new Robot()
    console.log('model',model)
    // 算分辨率 给透视矩阵用的
    const aspect = gl.canvas.width/gl.canvas.height;


    let angle = 0
    // const mesh = shape.d3_shpere_texture(1)
    // const model = new Model(mesh)

    // 控制面板
    let controle = {
      x:1.0, //
      y:1.0, //
      z:3.0, //
      ax:0.0, //
      ay:0.0, //
      az:0.0 //
    }

    gui.add(controle, 'x').min(-20).max(20).name('x').onChange((value)=>{})
    gui.add(controle, 'y').min(-20).max(20).name('y').onChange((value)=>{})
    gui.add(controle, 'z').min(-20).max(20).name('z').onChange((value)=>{})

    gui.add(controle, 'ax').min(0).max(2*Math.PI).name('ax').onChange((value)=>{})
    gui.add(controle, 'ay').min(0).max(2*Math.PI).name('ay').onChange((value)=>{})
    gui.add(controle, 'az').min(0).max(2*Math.PI).name('az').onChange((value)=>{})


    // 引入这个图片 static目录下面的
    // model.addTextureImage('/texture04.jpeg')

    function draw() {
      gl.enable(gl.DEPTH_TEST)
      gl.depthFunc(gl.LEQUAL)
      gl.clearDepth(1.0)
      gl.viewport(0.0, 0.0, canvas.width, canvas.height)
      gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)

      // 创建世界坐标
      const mat4 = new Mat4()

      model.setWorldMatrix(mat4
        // 让立方体转起来
        .rotate(0,angle,0)
        .translate(0,1,-1)
        // 观察矩阵 摄像头位置
        // .lookAt(0, 0, 0.4, 0, 0, 0)
        .lookAt(controle.x, controle.y, controle.z, controle.ax, controle.ay, controle.az)
        // 透视矩阵
        .perspective(Math.PI * 0.5, aspect, 1.0, 1000)
        .getMatrix()
      )

      angle += 0.02
      model.updateMatrix()
      model.draw()
      requestAnimationFrame(draw)
    }
    draw()
  })
</script>

<style scoped lang="scss">
#canvas{
  width: 100%;
  height: 100%;
  display: block;
}
</style>
